<template>
  <div class="clinicalManagement pd-20">
    <el-input placeholder="请输入项目名称"
              class="w-200"
              clearable
              @clear="handleQuery"
              v-model="searchParams.deviceName"></el-input>
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="warning"
               @click="option('add', null)">新 增</el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="searchParams.pageIndex"
                   :pageSize="searchParams.pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:icon="{row}">
        <el-image style="width: 50px; height: 50px"
                  :src="row.deviceImageUrl"
                  :preview-src-list="[row.deviceImageUrl]">
        </el-image>
      </template>
      <template v-slot:op="{row}">
        <el-button type="primary"
                   @click="option('edit', row)">编 辑</el-button>
        <el-button type="danger"
                   @click="option('del', row)">删 除</el-button>
      </template>
    </element-table>
    <clinical-dialog :visible.sync="isShow"
                     :dataObj="dataObj"
                     v-if="isShow"></clinical-dialog>
  </div>
</template>
<script>
  import elementTable from '@/base/ElementTable';
  import clinicalDialog from './clinicalDialog';
  export default {
    name: 'clinicalManagement', // 临床意义管理
    data () {
      return {
        loading: false,
        searchParams: {
          deviceName: '',
          pageIndex: 1,
          pageSize: 20
        },
        pageTotal: 0,
        tableData: [],
        columns: [
          {
            label: '项目名称',
            prop: 'deviceName',
            align: 'center',

          },
          {
            label: '图标',
            align: 'center',
            prop: 'icon',
            isSlot: true
          },
          {
            label: '前端排序',
            align: 'center',
            prop: 'sortNum'
          }
          ,
          {
            label: '操作',
            align: 'center',
            prop: 'op',
            width: 250,
            isSlot: true
          }
        ],
        isShow: false,
      }
    },
    methods: {
      handleQuery() {
        this.searchParams.pageIndex = 1
        this.getList()
      },
      async getList () {
        this.loading = true;
        const { data: res } = await this.post(this.api.clinical.clinicalList, {
          ...this.searchParams,
          pageIndex: this.searchParams.pageIndex - 1
        });
        if (res.code === '200') {
          this.loading = false;
          this.tableData = res.object;
          this.pageTotal = res.totalNum;
        }

      },
      // 分页
      handleChangePage (page) {
        this.searchParams.pageIndex = page;
        this.getList();
      },
      option (op, row) {
        switch (op) {
          case 'add':
            this.isShow = true;
            this.dataObj = null;
            break;
          case 'edit':
            this.isShow = true;
            this.dataObj = row;
            break;
          case 'del':
            this.$confirm('确认删除？')
              .then(async _ => {
                const { data: res } = await this.post(this.api.clinical.delClinicalList, { id: row.id });
                console.log(res.code);
                if (res.code === '200') {
                  this.$message.success('删除成功!');
                  this.getList();
                }
              })
              .catch(_ => { });
            break;
        }
      }
    },
    created () {
      this.getList();
    },
    components: {
      'element-table': elementTable,
      'clinical-dialog': clinicalDialog
    }
  }
</script>
<style scoped>
</style>
